<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>这是关于position定位的示例</title>
</head>
<body>
<style>
	img
	{
		top:50px;
		left:150px;
		border: medium double black;;
	}
</style>
</body>
<p>
	这是一个关于使用position的四个值进行定位的示例，通过按钮用JavaScript修改position的值以查看不同定位方式的表现。img元素定义位top:50px left:150px。
</p>
<p><img id="banana" src="images/banana-small.png" alt="一个小的香蕉图片" /></p>
<p>将图片放在中间位置，通过修改图片的定位属性来演示布局定位。
<ul>
	<li>static 默认值，普通布局，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</li>
	<li>relative 相对布局，元素位置相对于以static确定的元素原始位置定位</li>
	<li>absolute 绝对定位，元素相对于position值不为static的第一位祖先元素定位</li>
	<li>fixed 元素相对于浏览器窗口来定位，元素位置依据浏览器边界确定，不随内容滚动</li>
</ul>
</p>
<p>
	<button>Static</button>
	<button>Relative</button>
	<button>Absolute</button>
	<button>Fixed</button>
</p>
<script>
	var buttons = document.getElementsByTagName("BUTTON");
	for(var i = 0; i < buttons.length; i++)
	{
		buttons[i].onclick = function(e)
		{
			document.getElementById("banana").style.position = e.target.innerHTML;
		}
	}
</script>
</html>